<template>
  <div>
    <h1>App组件{{ count }}</h1>
    <button @click="$children[0].count++">修改Child1的count</button>
    <button @click="$children[1].count++">修改Child1的count</button>
    <hr />
    <Child1></Child1>
    <hr />
    <Child2></Child2>
  </div>
</template>

<script>
import Child1 from "@/components/Child1";
import Child2 from "@/components/Child2";
export default {
  name: "App",
  components: {
    Child1,
    Child2,
  },
  data() {
    return {
      count: 1000,
    };
  },
  mounted() {
    /* 
    在组件实例上有一个$children属性 key拿到所有子组件实例
    拿到子组件的实例 就可以操作子组件的数据和方法
    */
    console.log(this.$children);
  },
};
</script>

<style>
</style>
